<template>
<div>
    <el-drawer :model-value="isShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
        <template #header>
            <h4 style="font-weight: bold;">新增企业</h4>
        </template>
        <table class="tableItem" border="1">
            <tr>
                <td width="120" class="titleTd redColor"><span>名称*</span></td>
                <td><el-input v-model="companyInfo.name" style="height: 40px;" placeholder="请输入牛场名称" /></td>

                <td width="100" class="titleTd redColor"><span>代码*</span></td>
                <td><el-input v-model="companyInfo.farmCode" style="height: 40px;" placeholder="请输入养殖代码" /></td>

                <td width="120" class="titleTd redColor"><span>创建时间*</span></td>
                <td>
                    <el-date-picker style="width: 140px;" value-format="YYYY-MM-DD" v-model="companyInfo.buildDate" type="date" placeholder="请选择时间" />
                </td>
            </tr>
            <tr>
                <td class="titleTd redColor"><span>地址*</span></td>
                <td colspan="3"><el-input v-model="companyInfo.address" style="height: 40px;" placeholder="请输入地址" /></td>

                <td class="titleTd"><span>所属法人单位</span></td>
                <td><el-input v-model="companyInfo.orgName" style="height: 40px;" placeholder="请输入单位名称" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>经济性质</span></td>
                <td><el-input v-model="companyInfo.orgType" style="height: 40px;" placeholder="请输入经济性质" /></td>

                <td class="titleTd redColor"><span>负责人*</span></td>
                <td><el-input v-model="companyInfo.contactUsername" style="height: 40px;" placeholder="请输入负责人名称" /></td>

                <td class="titleTd redColor"><span>联系电话*</span></td>
                <td><el-input type="number" v-model="companyInfo.contactPhone" style="height: 40px;" placeholder="请输入联系电话" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>总投资(万元)</span></td>
                <td colspan="3"><el-input type="number" v-model="companyInfo.totalInvestment" style="height: 40px;" placeholder="请输入总投资" /></td>

                <td class="titleTd"><span>占地面积(亩)</span></td>
                <td><el-input type="number" v-model="companyInfo.landArea" style="height: 40px;" placeholder="请输入占地面积" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>类型</span></td>
                <td colspan="3">
                    <el-radio-group v-model="companyInfo.type" style="margin-left: 10px;">
                        <el-radio :value="2" size="large">国企</el-radio>
                        <el-radio :value="3" size="large">私企</el-radio>
                    </el-radio-group>
                </td>

                <td class="titleTd"><span>年总产值(万元)</span></td>
                <td><el-input type="number" v-model="companyInfo.annualOutput" style="height: 40px;" placeholder="请输入年总产值" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>职工人数</span></td>
                <td colspan="5"><el-input type="number" v-model="companyInfo.employeeCount" style="height: 40px;" placeholder="请输入职工人数" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>类型</span></td>
                <td colspan="2">
                    <!-- <el-select clearable v-model="companyInfo.declaredVariety" placeholder="请选择申报品种">
                        <el-option v-for="(item, index) in breedList" :key="index" :label="item.name" :value="item.value" />
                    </el-select> -->
                    <el-input v-model="companyInfo.declaredVariety" style="height: 40px;" placeholder="请输入类型" />
                </td>

                <td class="titleTd"><span>类型</span></td>
                <td colspan="2"><el-input type="number" v-model="companyInfo.stockCount" style="height: 40px;" placeholder="请输入类型" /></td>
            </tr>
            <tr>
                <td class="titleTd" style="vertical-align: middle;"><span>类型</span></td>
                <td colspan="2"><el-input type="number" v-model="companyInfo.breedingBulls" style="height: 40px;" placeholder="请输入类型" /></td>

                <td class="titleTd" style="vertical-align: middle;"><span style="line-height: 18px; font-size: 14px;">联合类型</span></td>
                <td colspan="2"><el-input v-model="companyInfo.breedingStation" style="height: 40px;" placeholder="请输入联合类型" /></td>
            </tr>
        </table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelHandler">关闭</el-button>
                <el-button type="primary" @click="addCompanyHandler">确认</el-button>
            </span>
        </template>
    </el-drawer>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { reqAddCompanyList } from '@/api/company'
import { reqGetBreedList } from '@/api/cattleStructure'
import { ElMessage } from 'element-plus'

// 接收父组件传递过来的数据
let props = defineProps(['isShow'])

// 注册自定义事件
let $emit = defineEmits(['closeAddDialog'])

// 收集表单信息
let companyInfo = ref({
    type: '',
    name: '',
    farmCode: '',
    buildDate: '',
    address: '',
    orgName: '',
    orgType: '',
    contactUsername: '',
    contactPhone: '',
    totalInvestment: '',
    landArea: '',
    annualOutput: '',
    employeeCount: '',
    declaredVariety: '',
    stockCount: '',
    breedingBulls: '',
    breedingStation: '',
})

// 品种，筛选下拉列表
let breedList = ref([])
const getBreedList = async () => {
    let res = await reqGetBreedList()
    breedList.value = res.data
}

// 确认按钮
const addCompanyHandler = async() => {
    let res = await reqAddCompanyList(companyInfo.value)
    if(res.status == 200){
        $emit('closeAddDialog', false)
        ElMessage({
            message: res.msg,
            type: 'success',
        })
    }
}

// 关闭按钮
const cancelHandler = () => {
    $emit('closeAddDialog', false)
}

// 组件挂载完毕
onMounted(() => {
    getBreedList()
})
</script>
<script>
export default {
    name: 'addCompany'
}
</script>

<style scoped lang="scss">
:deep(.el-drawer__header) {
    margin-bottom: 0;
    color: #000;
}
.tableItem{
    width: 100%;
    border-collapse: collapse;
    td{
        border: 1px solid #666666;
        // 表格中的输入框，样式修改
        ::v-deep(.el-input__wrapper) {
            --el-input-border-color: #ffffff;
            --el-input-border-radius: 0px;
            --el-input-focus-border-color: #ffffff;
            --el-input-hover-border-color: #ffffff; 
        }
    }
    .titleTd{
        span{
            line-height: 40px;
            text-align: center;
            display: block;
        }
    }
    tr{
        .redColor{
            color: red;
        }
    }
}
</style>